<template>
  <div class="progress-circle">
    <svg width="32" height="32" viewBox="0 0 100 100" version="1.1"
    xmlns="www://w3.org/2000/svg">
        <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
        <circle class="progress-abr" r="50" cx="50" cy="50" fill="transparent" stroke-dasharray="100"/>
    </svg> 
    <slot></slot> 
  </div>
</template>

<script type="text/ecmascript-6">
export default {

}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '~common/stylus/variable'
  .progress-circle
    position :relative
    circle
      stroke-width :8px
      transform-origin :center
      &.progress-background
        transform :scale(0.9)
        stroke :$color-theme-d
      &.progress-background
         transform :scale(0.9) rotate(-90deg)
         stroke :$color-theme
</style>
